<script lang="ts" setup>
import type { RenderTool } from './type'
import { useDesignStore } from '@/stores'
import { Popconfirm } from 'ant-design-vue'
import { computed } from 'vue'

defineOptions({
  name: 'RenderTools',
})
const props = defineProps<{
  renderIndex: number
}>()
const designStore = useDesignStore()
const tools = computed<RenderTool[]>(() => {
  const tools: RenderTool[] = [
    {
      icon: 'i-ant-design:close-outlined',
      key: 'delete',
      popConfirm: {
        title: '确定删除？',
      },
    },
  ]
  if (props.renderIndex !== designStore.renders.length - 1) {
    tools.unshift({
      icon: 'i-ant-design:arrow-down-outlined',
      key: 'bottom',
    })
  }
  if (props.renderIndex !== 0) {
    tools.unshift({
      icon: 'i-ant-design:arrow-up-outlined',
      key: 'top',
    })
  }
  return tools
})
function handleToolClick(tool: RenderTool) {
  switch (tool.key) {
    case 'top':
      designStore.handleRenderAction('up')
      break
    case 'bottom':
      designStore.handleRenderAction('down')
      break
    case 'delete':
      designStore.handleRenderAction('delete')
      break
    default:
      break
  }
}
</script>

<template>
  <div class="bg-white absolute py-2 render-tools">
    <template v-for="tool of tools" :key="tool.key">
      <Popconfirm v-if="tool.popConfirm" v-bind="tool.popConfirm" arrow-point-at-center placement="left" @confirm="handleToolClick(tool)">
        <div class="py-1 render-tool-wrap">
          <div class="flex flex-row justify-center render-tool">
            <!-- render-tool-icon -->
            <div
              class="flex flex-row justify-center justify-center rounded-full text-main-app render-tool-icon"
            >
              <i class="w-16px h-16px" :class="tool.icon" />
            </div>
          </div>
        </div>
      </Popconfirm>
      <div v-else class="py-1 render-tool-wrap" @click="handleToolClick(tool)">
        <div class="flex flex-row justify-center render-tool">
          <!-- render-tool-icon -->
          <div class="flex flex-row justify-center justify-center rounded-full text-main-app render-tool-icon">
            <i class="w-16px h-16px" :class="tool.icon" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.render-tools {
    width: 36px;
    top: -2px;
    right: -50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
}

.render-tool-wrap {
    &:hover .render-tool-icon {
        border-color: var(--app-color-primary);
        color: var(--app-color-primary);
    }
}

.render-tool {
    cursor: pointer;
}

.render-tool-icon {
    border: 1px solid var(--app-text-color-main);
}
</style>
